<template>
  <el-container style="display: flex">
    <el-header style="height: 60px;margin-left: 100px;">
      <el-button @click="back"><el-icon><ArrowLeft/></el-icon></el-button>
      <div style="text-align: left;font-weight: bold;margin-left: 280px;">检查预约信息</div>
    </el-header>

    <div style="display: flex;justify-content: center">
      <el-card shadow="none" style="border:none;text-align: left;padding-left: 100px;padding-right: 100px;">
        <p>就诊日期：{{ formatDate(details.date) }}</p>
        <p>就诊时段：{{ formatTimeSlot(details.timeSlot) }}</p>
        <p>就诊科室：{{ details.departmentName }}</p>
        <p>就诊门诊：{{ details.clinicName }}</p>
        <p>检查项目：{{ details.examItemName }}</p>
        <p>医生姓名：{{ details.checkDoctorName }}</p>
<!--        <p>医生职称：{{ details.doctorTitle }}</p>-->
        <p>患者姓名：{{ patientInfo.name }}</p>
        <p>就诊卡号：{{ patientInfo.medicalCard }}</p>
        <p>挂号费用：{{ details.fee }}</p>
        <p>挂号时间：{{ formatDateTime(details.payTime) }}</p>
        <p>挂号单号：{{ details.orderId }}</p>
        <p>订单状态：{{ formatStatus(details.status) }}</p>
        <el-button v-show="details.status === 1 && isCanceled === false" type="warning" plain @click="cancelAppointVisible = true">取消预约</el-button>

      </el-card>
    </div>
  </el-container>


  <!--取消预约dialog-->
  <el-dialog
      v-model="cancelAppointVisible"
      width="500"
      center
  >
    <span>是否取消预约？</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="cancelConfirm">确认取消</el-button>
        <el-button  @click="cancelAppointVisible = false">关闭取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import {useRouter} from "vue-router";
import {ArrowLeft} from "@element-plus/icons-vue";
import {ref} from "vue";
import alipayApi from "@/apis/alipay";
import {ElMessage} from "element-plus";

const router = useRouter();
const details = JSON.parse(sessionStorage.getItem('exam_details'))
const patientInfo = JSON.parse(sessionStorage.getItem('userInfo'))

const back = () =>{
  router.back();
  sessionStorage.removeItem('exam_details')
}


console.log(details)

/**
 * 取消预约 -退款 -还号
 */
const cancelAppointVisible = ref(false)
const isCanceled = ref(false)
const cancelConfirm = async () =>{
  const data = {
    orderId:details.orderId,
    fee:details.fee,
    // examSpotsId:details.examSpotsId, //从后端获取
    examRecordId:details.id
  }
  // console.log(data)
  const res = await alipayApi.refund(data);
  console.log(res)
  if(res.data === "success" ){
    cancelAppointVisible.value = false;
    ElMessage({
      title:'成功提示',
      message:'取消预约成功，检查金额已退还',
      type:'success'
    })
    isCanceled.value = true;
  }else {
    ElMessage({
      title:'失败提示',
      message:'取消预约失败',
      type:'error'
    })
    cancelAppointVisible.value = false;
  }
  // sessionStorage.removeItem('exanInfo')
}



/**
 * 日期、时间、时段格式
 * @param payTime
 * @returns {string}
 */
function formatDate(rawDate) {
  if(rawDate === null){
    return '未知时间';
  }
  const date = new Date(rawDate);
  const year = date.getFullYear(); // 获取年份
  const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 获取月份，月份从0开始，所以加1
  const day = date.getDate().toString().padStart(2, '0'); // 获取日
  return `${year}-${month}-${day}`;
}


function formatDateTime(payTime) {
  const date = new Date(payTime);
  const year = date.getFullYear(); // 获取年份
  const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 获取月份，月份从0开始，所以加1
  const day = date.getDate().toString().padStart(2, '0'); // 获取日
  const hours = date.getHours().toString().padStart(2, '0'); // 获取小时
  const minutes = date.getMinutes().toString().padStart(2, '0'); // 获取分钟
  const seconds = date.getSeconds().toString().padStart(2, '0'); // 获取秒
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}

const times = [
  {id:0,name:'08:00-08:30'},
  {id:1,name:'08:30-09:00'},
  {id:2,name:'09:00-09:30'},
  {id:3,name:'09:30-10:00'},
  {id:4,name:'10:00-10:30'},
  {id:5,name:'10:30-11:00'},
  {id:6,name:'14:00-14:30'},
  {id:7,name:'14:30-15:00'},
  {id:8,name:'15:00-15:30'},
  {id:9,name:'15:30-16:00'},
  {id:10,name:'16:00-16:30'},
  {id:11,name:'16:30-17:00'},
];

function formatTimeSlot(timeSlotId){
  const time = times.find(item => item.id === timeSlotId)
  return time ? time.name : '未知时段';
}

function formatStatus(status){
  if(status === 0){
    return '待支付';
  }
  if(status === 1){
    return '待就诊';
  }
  if(status === 2){
    return '已就诊';
  }
  if(status === 3){
    return '已取消/已作废';
  }
}

</script>



<style scoped>

</style>
